<template>
  <div class="ee">
    <a-form :form="form" class="form">
      <a-row>
        <a-col :span="6">
          <a-form-item label="补货时间" :label-col="{ span: 8 }" :wrapper-col="{ span:16,offset:0.8}">
            <a-date-picker v-decorator="['time']" format="YYYY-MM-DD HH:mm:ss" placeholder="补货时间"></a-date-picker>
          </a-form-item>
        </a-col>
      </a-row>
      <!-- //待补货设备 -->
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="6">
          <div class="gutter-box">
            <a-form-item label="补货状态" :label-col="{ span:8}" :wrapper-col="{ span:16, offset: 0.8}">
              <a-select
                v-decorator="['lowser']"
                @select="handleLowserChange"
                placeholder="低于阀值"
                style="width:100%"
              >
                <a-select-option :value="-1">全部</a-select-option>
                <a-select-option :value="1">低于阀值</a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">
            <a-form-item>
              <a-select
                :disabled="wangDisabled"
                v-decorator="['wang']"
                placeholder="请选择网点"
                @select="handleWangChange"
              >
                <a-select-option
                  v-for="item in networkInfo"
                  :key="item.branchesId"
                  :value="item.branchesId"
                >{{item.branchName}}</a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">
            <a-form-item>
              <a-select
                :disabled="pointDisabled"
                v-decorator="['point']"
                @select="handlePointChange"
                placeholder="请选择点位"
              >
                <a-select-option
                  v-for="item in pointInfo"
                  :key="item.posId"
                  :value="item.posId"
                >{{item.posName}}</a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <div class="gutter-box">
            <a-form-item>
              <a-select
                labelInValue
                :disabled="devcodeDisabled"
                @select="handleDevcodeChange"
                v-decorator="['devcode']"
                placeholder="请选择设备"
              >
                <a-select-option
                  v-for="item in deviceInfo"
                  :key="item.deviceAgentId"
                  :value="item.deviceAgentId"
                >{{item.devCode}}</a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-item
            label="待补货设备地址"
            :label-col="{ span: 6}"
            :wrapper-col="{ span: 16, offset: 0.8}"
          >
            <a-input :disabled="addressDisabled" placeholder="地址" v-decorator="['address']" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-item
            label="指派巡柜员"
            :label-col="{ span: 6}"
            :wrapper-col="{ span: 16, offset: 0.8}"
          >
            <a-select :disabled="employeeDisabled" v-decorator="['employee']" placeholder="请选择巡柜员">
              <a-select-option
                v-for="item in employeeInfo"
                :key="item.employeeId"
                :value="item.employeeId"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="待补货清单"></a-form-item>
      <a-table
        class="tb"
        :columns="columns"
        :dataSource="data"
        :bordered="true"
        :pagination="false"
        :rowKey="record => record.goodsId"
      >
        <template slot="number" slot-scope="text,record,index" href="javascript:;">{{index+1}}</template>
        <template slot="planQuantity" slot-scope="text,record" href="javascript:;">
          <a-input
            style="width:80px;text-align:center"
            :value="text"
            @change="e => inputNumberChange(e.target.value,record.goodsId)"
          />
        </template>
      </a-table>
      <!-- //待下货清单 -->
      <a-form-item label="待下货清单"></a-form-item>
      <a-table
        class="tb"
        :columns="columnss"
        :dataSource="dataa"
        :bordered="true"
        :pagination="false"
        :rowKey="record => record.deviceAgentId"
      >
        <template slot="number" slot-scope="text,record,index" href="javascript:;">{{index+1}}</template>
      </a-table>
      <div class="r">
        <router-link to="/home/repertoryadmin/repairinvoice">
          <a-button>取消</a-button>
        </router-link>
        <a-button style="margin-left:2%" type="primary" @click="enter()">确定</a-button>
      </div>
    </a-form>
    <!-- <a-button type="primary">Primary</a-button> -->
  </div>
</template>

<script>
import moment from "moment";
const columns = [
  {
    //dataindex是用来渲染数据的
    dataIndex: "number",
    title: "序号",
    align: "center",
    scopedSlots: { customRender: "name" }
  },
  {
    dataIndex: "goodsName",
    title: "商品名称",
    align: "center"
  },
  {
    dataIndex: "sales",
    title: "已售",
    align: "center"
  },
  {
    dataIndex: "stock",
    title: "库存",
    align: "center"
  },
  {
    dataIndex: "standardStock",
    title: "标准库存",

    align: "center"
  },
  {
    dataIndex: "replenishNumber",
    title: "待补货",
    align: "center"
  },
  {
    dataIndex: "planQuantity",
    scopedSlots: { customRender: "planQuantity" },
    title: "实际需补货",
    align: "center"
  }
];

const columnss = [
  {
    dataIndex: "name",
    title: "序号",
    align: "center"
  },
  {
    dataIndex: "goodsName",
    title: "商品名称",
    align: "center"
  },
  {
    dataIndex: "sales",
    title: "已售",
    align: "center"
  },
  {
    dataIndex: "standardStock",
    title: "标准库存",
    align: "center"
  },
  {
    dataIndex: "planQuantity",
    title: "待下架",
    align: "center"
  }
];
const dataa = [
  {
    key: "1"
  }
];

const data = [
  {
    key: "2"
  }
];

export default {
  data() {
    return {
      expand: false,
      //上面绑定了form表单所以后面用this.creatform
      form: this.$form.createForm(this),
      // data里面存储的是list的数据
      data: [],
      columns,
      columnss,
      dataa: [],
      networkInfo: [],
      pointInfo: [],
      deviceInfo: [],
      employeeInfo: [], //巡柜员选择框数据
      wangDisabled: true,
      pointDisabled: true,
      devcodeDisabled: true,
      addressDisabled: true,
      employeeDisabled: true
    };
  },
  methods: {
    inputNumberChange(value, key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.goodsId)[0];
      if (target) {
        target["planQuantity"] = value;
        this.data = newData;
      }
    },
    handleLowserChange(value) {
      this.stockStatus = value;
      this.branchList();
      this.form.resetFields(["wang"]);
      this.wangDisabled = false;
    },
    handleWangChange(value) {
      this.posList(value);
      this.pointDisabled = false;
      this.form.resetFields(["point"]);
    },
    handlePointChange(value) {
      this.form.resetFields(["devcode", "address", "employee"]);
      this.deviceList(value);
      this.devcodeDisabled = false;
      this.addressDisabled = false;
      this.employeeDisabled = false;
      this.getBindEmployee(value);
      this.detail(value);
    },
    handleDevcodeChange(value) {
      this.deviceAgentId = value.key;
      this.devCode = value.label;
      this.creatlist();
    },
    //重置方法
    handleReset() {
      this.form.resetFields();
    },

    // 网点下拉框列表
    branchList() {
      this.axios
        .post(this.baseUrl + "/stock/branchList", {
          loginToken: this.$store.state.loginToken,
          stockStatus: this.stockStatus
        })
        .then(response => {
          this.networkInfo = response.data.data;
          this.networkValue = response.data.data[0].branchesId;
          this.form.setFieldsValue({
            wang: this.networkValue
          });
        });
    },

    // 点位下拉框列表
    posList(branchesId) {
      this.axios
        .post(this.baseUrl + "/stock/posList", {
          loginToken: this.$store.state.loginToken,
          branchesId: branchesId,
          stockStatus: this.stockStatus
        })
        .then(response => {
          console.log(response);
          this.pointInfo = response.data.data;
          this.pointValue = response.data.data[0].posId;
          this.form.setFieldsValue({
            point: this.pointValue
          });
        });
    },

    // 设备下拉框列表
    deviceList(posId) {
      this.axios
        .post(this.baseUrl + "/stock/deviceList", {
          loginToken: this.$store.state.loginToken,
          posId: posId,
          stockStatus: this.stockStatus
        })
        .then(response => {
          console.log(response);
          this.deviceInfo = response.data.data;
          this.devcodeValue = { key: response.data.data[0].deviceAgentId };
          this.form.setFieldsValue({
            devcode: this.devcodeValue
          });
        });
    },

    // 根据点位ID查询对应寻柜员
    getBindEmployee(posId) {
      this.axios
        .post(this.baseUrl + "/posEmployee/getBind", {
          loginToken: this.$store.state.loginToken,
          posId: posId
        })
        .then(response => {
          // console.log(response);
          this.employeeInfo = response.data.data;
          this.employeeValue = response.data.data[0].employeeId;
          this.form.setFieldsValue({
            employee: this.employeeValue
          });
        });
    },

    // 根据点位ID查询对应地址
    detail(posId) {
      this.axios
        .post(this.baseUrl + "/pos/detail", {
          loginToken: this.$store.state.loginToken,
          posId: posId
        })
        .then(response => {
          console.log(response);
          this.addressValue = response.data.data.address;
          this.form.setFieldsValue({
            address: this.addressValue
          });
        });
    },

    creatlist() {
      console.log(this.deviceAgentId);
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/replenishmentOrder/replenishmentList", {
          loginToken: this.$store.state.loginToken,
          deviceAgentId: this.deviceAgentId
        })
        .then(response => {
          if (response.data.code == 0) {
            // console.log(response.data);
            // /待补货清单
            this.data = response.data.data.replenishmentList;
            //待下货清单
            this.dataa = response.data.data.inboundList;
          }
        });
    },

    //添加补货单
    enter() {
      var values = this.form.getFieldsValue();
      this.replenishmentTime = moment(values.time._d).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.axios
        .post(this.baseUrl + "/replenishmentOrder/add", {
          loginToken: this.$store.state.loginToken,
          //网点编号
          branchId: values.wang,
          devCode: this.devCode,
          deviceAgentId: this.deviceAgentId,
          employeeId: values.employee,
          posAddr: values.address,
          posId: values.point,
          replenishmentTime: this.replenishmentTime,
          //待补货清单
          replenishmentList: this.data,
          //待下架清单
          inboundList: this.dataa
        })
        .then(response => {
          if (response.data.code == 0) {
            //成功后的回调函数
            this.$router.push({
              path: "/home/repertoryadmin/Repairinvoice"
            });
            //总条数-每一页的条数-当前的
            this.$message.info("新增成功");
          }
        });
    }
  },
  created() {}
};
</script>

<style scoped>
.tb {
  margin-top: -50px;
  margin-left: 100px;
}
.r {
  margin-top: 2%;
  text-align: right;
}
.form {
  padding-left: 3%;
}
</style>
